<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
	<pre>
	修改数组，可以使用方法，也可以使用索引
    但是，使用索引对数据进行修改，数据不具有响应式，
    这时候，就可以使用 Vue.set()、vm.$set()
	</pre>
	<div id="app">
		<p v-for="(item,index) in arr" :key="index">{{item}}</p>
		<p>{{obj.name}}</p>
		<p>{{obj.info}}</p>
    </div>

	
    <script>
        var vm = new Vue({
            el: '#app'
            ,data: {
				arr:['first' ,'second', 'third'],
				obj:{
					name:'张山',
					info:'学生'
				}
			}
			
        })
		<!-- vm.arr[0]='one' -->
		<!-- 不能对数组进行修改 -->
		<!-- 第一个参数：只需要修改的数据 -->
		<!-- 第二个参数：指需要修改数据的索引 -->
		<!-- 第三个参数：修改之后的值 -->
		<!-- 动态修改 1.-->
		vm.$set(vm.arr,0,'one')
		Vue.set(vm.arr,1,'two')
		<!-- 修改成功 -->
		vm.$set(vm.obj,'name','Tom')
		
	</script>
</body>

</html>